import React, { useState, useRef, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { Link, connect } from 'umi'
import { getAccountOpenList, confirmChange } from '../../service'
import { message, Tabs, Popconfirm } from 'antd'
import { accountOpenTypes } from '@/utils/constant'
const  { TabPane } = Tabs;

const TableList = () => {
  const actionRef = useRef();
  const actionRef2 = useRef();
  const [tabIndex, setTabIndex] = useState("0");
  const [loading, setLoading] = useState(false);

  const columns = [
    {
      title: '序号',
      dataIndex: 'number',
      hideInSearch: true,
      render:(text,record,index)=>`${index+1}`,
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '公司（新）',
      dataIndex: 'orgName',
      hideInSearch: true,
    },
    {
      title: '部门（新）',
      dataIndex: 'unitName',
      hideInSearch: true,
    },
    {
      title: '岗位（新）',
      dataIndex: 'jobName',
      hideInSearch: true,
    },
    {
      title: '电话',
      dataIndex: 'mobile',
      hideInSearch: true,
    },
    {
      title: '类型',
      dataIndex: 'type',
      hideInSearch: true,
      valueEnum: {
        1: { text: accountOpenTypes[0].label },
        2: { text: accountOpenTypes[1].label },
        3: { text: accountOpenTypes[2].label },
        4: { text: accountOpenTypes[3].label },
        5: { text: accountOpenTypes[4].label },
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      width: '10%',
      hideInSearch: true,
      hideInTable: tabIndex==='1',
      render: (item, record) => (
        <>
          <Popconfirm title={`是否进行确认?`}
                      onConfirm={() => confirmChangeStatus(record.id)}
                      okText="是" cancelText="否">
            <a>确认</a>
          </Popconfirm>
        </>
      ),
    },
  ];

  const confirmChangeStatus = (id) => {
    confirmChange(id).then(res => {
      if (res.flag){
        message.success('确认成功！');
        actionRef.current.reload();
      }else {
        message.error(res.error);
      }
    })
  };

  const handleChangTabIndex = (key) => {
    setTabIndex(key);
    if(key === '0'){
      actionRef.current &&  actionRef.current.reload();
    }else{
      actionRef2.current && actionRef2.current.reload();
    }
  };

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="0" onChange={handleChangTabIndex}>
        <TabPane tab="待办理" key="0">
          <ProTable
            actionRef={actionRef}
            loading={loading}
            rowKey="oid"
            request={(params) => getAccountOpenList(params,0)}
            columns={columns}
          />
        </TabPane>
        <TabPane tab="已办理" key="1">
          <ProTable
            actionRef={actionRef2}
            rowKey="oid"
            request={(params) => getAccountOpenList(params,1)}
            columns={columns}
          />
        </TabPane>
      </Tabs>
    </PageHeaderWrapper>
  )
};

export default connect(() => ({

}))(TableList)
